<template>
    <div class="out-code">
        <div class="positionR">
            <swiper :swiperContentProp="swiperMsg" :swiperOptionProp="{paginationType: 'bullets'}"></swiper>
            <full-width-video v-if="outCodeMsg.videoUrl" :fullWidthVideoProp="{videoUrl:outCodeMsg.videoUrl}"></full-width-video>
        </div>
        <title-bar :titleBarProp="{title:'商品详情'}"></title-bar>
        <div class="out-code-wdescription">
            <p class="out-code-description">
                商品描述：{{outCodeMsg.itemDesc}}
            </p>
        </div>
        <div>
            <div class="out-wdescription" v-for="value in outCodeMsg.detailPhotos">
                <img class="width-full displayBlock" v-lazy="value" alt="">
            </div>
        </div>
        <div class="code-wrap">
            <!--条形码-->
            <div v-if="outCodeMsg.codeType == 1">
                <vue-barcode class="displayFlex flexCenter vue-barcode" v-if="outCodeMsg.content" :value="outCodeMsg.content" displayValue="true">
                        你的手机无法显示此条形码
                </vue-barcode>
            </div>
            <!--二维码-->
            <div class="out-code-wrap" v-else-if="outCodeMsg.codeType == 2">
                <qr-code :qrCodeProp="{content:outCodeMsg.content}"></qr-code>
                <!--<p class="code-description width-full text-center">微信扫面二维码购买此商品</p>-->
            </div>
        </div>
    </div>
</template>

<script>
    /*条形码*/
    import VueBarcode from 'vue-barcode';

    export default {
        name: "OutCode",
        data() {
            return {
                outCodeItemId: 0,
                outCodeMsg: {
                    /*
                    *   "id": 2,                                                                ----外部码商品ID
                        "content": "fds322azd2",                                                ----码内容
                        "codeType": 2, 1条形码，2二维码                                         ----@码类型
                        "coverImgUrl": "https://xx/1.jpg",                                      ----视频封面图片
                        "videoUrl": "https://xx/1.mp4",                                         ----视频地址
                        "itemTitle": "新鲜红皮无花果3斤 京东生鲜 现摘现发 新鲜水果 无花果3斤",      ----商品名称
                        "cyclePhotos": [                                                        ----商品轮播图
                          "https://xxx/2.webp",
                          "https://xxx/3.webp",
                          "https://xxx/4.webp"
                        ],
                        "itemDesc": "丰收季水果专场满199-80，薄皮蜜桔9.9",                      ----商品描述
                        "detailPhotos": [                                                       ----商品描述图
                          "https://xx/d1.webp",
                          "https://xx/d2.webp"
                        ]
                    */
                },
                swiperMsg: {},
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.outCodeItemId = this.$route.params.outCodeItemId;
                let url = `${this.NW_API_API_LOCALE_VERSION}/code/get/out/code/${this.outCodeItemId}/item`;
                this.xurl.getLoading(url).then((data) => {
                    this.outCodeMsg = data.result;
                    this.dealSwiper(data.result)
                })
            },
            dealSwiper(obj) {
                let tempObj = {
                    imgList: obj.cyclePhotos,
                    isLoop:true,
                };
                this.swiperMsg = Object.assign({}, this.swiperMsg, tempObj)
            },
            // videoControls(){
            //     let that = this;
            //     this.videoShow = true;
            //     setTimeout(()=>{
            //         this.$refs.outCodeVideo.play();
            //         this.$refs.outCodeVideo.addEventListener('pause',()=>{
            //             that.videoShow = false;
            //         })
            //     },1000)
            // }
        },
        components: {
            'swiper': () => import('../../components/commonComponents/swiperComponent/Swipers'),
            'title-bar': () => import('../../components/commonComponents/titleBar/TitleBar'),
            'qr-code': () => import('../../components/commonComponents/code/QrCode'),
            'full-width-video': () => import('../../components/commonActModel/video/FullWidthVideo'),
            'vue-barcode': VueBarcode,
        }
    }
</script>

<style scoped lang="scss">
    .out-code /deep/{
        .video-border{
            display: flex;
            align-items: center;
            width: 100%;
        }
    }
    .out-code-wdescription {
        padding: .15rem;
        color: #999;
    }
    .out-code-wrap{
        padding: .15rem;
        text-align: center;
    }
    .out-code-wrap /deep/{
        #qrCode{
            text-align: center;
            display: flex;
            justify-content: center;
        }
    }
    .code-description{
        padding: .15rem;
    }
</style>